<template>
  <div class="home">
    <TotalPrice></TotalPrice>
    <template v-for="item in cartList">
      <card-item :item="item" :key="item.id">
        <template #footer>
          <van-button size="small" @click="handleAddItem.stop(item)">
            +
          </van-button>
          <van-button size="small" @click="handleReduceItem.stop(item)">
            -
          </van-button>
        </template>
      </card-item>
    </template>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import CardItem from '../components/CardItem.vue'
import TotalPrice from '../components/TotalPrice.vue'
export default {
  components: { CardItem, TotalPrice },
  computed: {
    ...mapState(['cartList']),
  },
  methods: {
    ...mapMutations(['addItem', 'reduceItem']),
    handleAddItem(item) {
      this.addItem(item)
    },
    handleReduceItem(item) {
      this.reduceItem(item)
    },
  },
}
</script>
